<template>
	<view class="main" :style="{ 'margin-top': marTop }">
		<view class="current-city">{{ city }}</view>
		<view class="baoming">
			已有
			<text>{{ baomingNum }}</text>
			人报名
		</view>
		<view v-if="!bmjm" class="button" @click="isShowBm = true">我要加盟</view>
		<view v-if="bmjm" class="button-no">
			<text>报名成功</text>
			<text>等待招商经理与您联系</text>
		</view>

		<view class="mask" v-if="isShowBm">
			<view class="mask-main">
				<view class="main-title">
					<image @click="isShowBm = false" src="../../static/icon3/gb.png" mode="aspectFill"></image>
					<text>请填写加盟信息</text>
				</view>
				<view class="main-item">
					<view>姓名</view>
					<view><input type="text" v-model="name" placeholder="请输入您的姓名" placeholder-class="xzcs" /></view>
				</view>
				<view class="main-item">
					<view>电话号码</view>
					<view><input type="number" v-model="phone" placeholder="请输入您的电话号码" placeholder-class="xzcs" />
					</view>
				</view>
				<view class="main-item">
					<view>验证码</view>
					<view>
						<input type="number" v-model="yzm" placeholder="请输入验证码" placeholder-class="xzcs"
							style="width: 285rpx;" />
							
						<view v-if="!verificationFlag"  @click="handleSendCode()" class="yzm">获取验证码</view>
						<view v-if="verificationFlag" class="yzm"   style="color: #a2a2a2;background: #ccc;">{{ count }}S</view>
						
						
						
						
					</view>
				</view>
				<view class="main-item">
					<view>城市</view>
					<view @click="handleOpenAddres()">
						<view class="cs-view">
							<input disabled="true" type="text" v-model="xzCity" placeholder="请选择您要加盟的城市"
								placeholder-class="xzcs" />
							<text class="xzcs">></text>
						</view>
					</view>
				</view>
				<view class="main-item">
					<view>资金投入</view>
					<view class="money-box">
						<view class="pic-money" :class="{act:money_index==index}" @click="pickMoney(index)"
							v-for="(item,index) in money_list" :key='index'>{{item}}</view>
					</view>
				</view>
				<view class="main-item">
					<view>投入原因</view>
					<view @click="isShowJmReason=true">
						<view class="cs-view">
							<input disabled="true" type="text" v-model="jmReason" placeholder="请选择你要加盟的原因"
								placeholder-class="xzcs" />
							<text class="xzcs">></text>
						</view>
					</view>
				</view>
				<view class="main-button" @click="attract_business()">提 交</view>
			</view>
			<view class="jmReason" v-if=isShowJmReason>
				<view class="bg" @click="isShowJmReason=false"></view>
				<view class="jmMain">
					<view class="title">请选择原因</view>
					<view class="jm-item" :class="{act:jm_index==index}" @click="pickJiamengReason(index)"
						v-for="(item,index) in JiamengReasonList" :key='index'>{{item}}</view>
					<view class="jmbtns">
						<view class="btn left" @click="isShowJmReason=false">
							取消
						</view>
						<view class="btn right" @click="comfirmJiamenReason">
							确认
						</view>
					</view>
				</view>
			</view>
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="cityOnConfirm"
				themeColor="#007AFF"></simple-address>
		</view>
	</view>
</template>

<script>
	import unit from '../../libs/newUnit.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue'
	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				cityPickerValueDefault: [10, 6, 6], //省市区弹框
				city: '',
				baomingNum: 0,
				isShowBm: false,
				name: '',
				phone: '',
				yzPhone: false,
				verificationFlag: false,
				xzCity: '',
				yzm: '',
				county: '',
				count: 60,
				timer: null,//验证码计时器
				province: '',
				bmjm: false,
				marTop: '-160rpx',
				money_list: ['100万以下', '100-300万', '300万以上'],
				JiamengReasonList: ['误入，我是找工作的', '误入，我是招工的', '有想法，我想尝试加盟', '是的，我要加盟'],
				jmReason: '',
				jm_index: 3,
				money_index: 0,
				isShowJmReason: false
			}
		},
		methods: {
			async requestAndroidPermission(permisionID) {
				if (plus.os.name != 'Android') return
				var result = await permission.requestAndroidPermission(permisionID)
				if (result == 1) {
				}else{
						// 被永久拒绝权限
						uni.showModal({
							title: '提醒',
							content: '获取开放区域需要您的位置，请在权限管理中同意位置信息授权',
							confirmText: '去开启',
							// showCancel: false, // 不显示取消按钮
							success(res) {
								if(res.confirm) {
									permission.gotoAppPermissionSetting()
								}
							}  
						})
				}
			},
			/* 选择加盟金额 */
			pickMoney(index) {
				// console.log(index)
				this.money_index = index
			},
			/*选择加盟理由*/
			pickJiamengReason(index) {
				this.jm_index = index
			},
			/* 确认加盟理由 */
			comfirmJiamenReason() {
				this.jmReason = this.JiamengReasonList[this.jm_index]
				this.isShowJmReason = false
			},
			//打开省市区弹框
			handleOpenAddres() {
				this.$refs.simpleAddress.open();
			},
			cityOnConfirm(e) {
				this.province = e.labelArr[0]
				this.county = e.labelArr[1]
				this.xzCity = e.labelArr[2]
				console.log('e', e, )
			},
			// 发送验证码
			async handleSendCode() {
				
				if (!this.checkLoginNameFormat(this.phone)) return
				this.verificationFlag = true
				
				const mobile = this.$jsencrypt.setEncrypt(this.$api.publicKey, this.phone);
				let res = await this.$fetch(this.$api.mobile_verification_code, {
					length: 6,
					mobile
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.timer = setInterval(() => {
				  if (this.count === 0) {
				    clearInterval(this.timer)
					this.verificationFlag = false
					this.count = 60
				  }
				  this.count = --this.count
				  // console.log( this.count)
				}, 1000)
			},
			// 验证手机号格式是否正确
			checkLoginNameFormat(mobile) {
				let reg = /^[1][3456789][0-9]{9}$/
				if (!reg.test(mobile)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					this.yzPhone = false
					return this.yzPhone
				}
				this.yzPhone = true
				return this.yzPhone
			},
			attract_business() {
				
				if (this.yzm.length != 6 || this.name == '' || this.yzPhone == false || this.xzCity == '' || this.jmReason =='') return uni.showToast({
						title: '请完整填写信息',
						icon: 'none'
					})
					// console.log(this.yzm, this.xzCity, this.county, this.city, this.province,this.phone,this.jmReason,this.name,this.jm_index+1,this.money_index+1)
				unit.attract_business(this.yzm, this.xzCity, this.county, this.province, this.phone, this.name, this.jm_index+1, this.money_index+1).then(v => {
					if (v.code == 0) {
						uni.showToast({
							title: '已提交',
							icon: 'none'
						})
						this.attract_business_size()
						this.isShowBm = false
						this.bmjm = true
						uni.setStorageSync('bmjm', true)
					}else{
						uni.showToast({
							title: v.msg,
							icon: 'none'
						})
					}
				})
			},
			attract_business_size() {
				unit.getCity().then(v => {
					this.city = v
					console.log('111111111111111111', v)
					unit.attract_business_size(v).then(v => {
						this.baomingNum = v.data
					})
				})
			},
		},
		onLoad() {
			this.attract_business_size()
			this.bmjm = uni.getStorageSync('bmjm') ? uni.getStorageSync('bmjm') : false
			this.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION')
			// try{
			// 	let res = uni.getSystemInfoSync()
			// 	//res.screenWidth
			// 	let a = (400 - res.screenWidth) * 5
			// 	if(res.screenHeight>=800){
			// 		this.marTop=res.screenHeight-592<=220?`${-(res.screenHeight-592)+a}rpx`:`-${220+a}rpx`
			// 	}else{
			// 		this.marTop='-220rpx'
			// 	}
			// 	console.log('11',this.marTop,res.screenHeight-592,res.screenWidth)
			// }catch(e){
			// 	//TODO handle the exception
			// }
		},
		onShow() {
			
		}
	}
</script>

<style lang="less" scoped>
	.main {
		background-image: url(../../static/jiameng/jm.jpg);
		background-size: 100% 100%;
		width: 750rpx;
		height: 1624rpx;
		// margin-top: -208rpx;
	}

	.current-city {
		transform: translate(399rpx, 232rpx);
		width: 200rpx;
		height: 64rpx;
		background: #402110;
		border-radius: 12rpx;
		font-size: 56rpx;
		font-weight: bold;
		color: #fdc928;
		line-height: 64rpx;
		text-align: center;
	}

	.baoming {
		width: 750rpx;
		text-align: center;
		transform: translateY(1120rpx);
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #1a1a1a;
		line-height: 79rpx;

		&>text {
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fe4b28;
			line-height: 79rpx;
		}
	}

	.jmReason {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 100;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			z-index: 110;
			background: rgba(0, 0, 0, 0.7);
		}

		.jmMain {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 120;
			background-color: #fff;
			width: 550rpx;
			padding: 60rpx 0 0 0;
			border-radius: 15rpx;

			.title {
				color: #1A1A1A;
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
				margin-bottom: 34rpx;
			}

			.jm-item {
				width: 478rpx;
				height: 72rpx;
				background: #FFFFFF;
				border: 1rpx solid #BDBDBD;
				color: #A5A5A5;
				font-size: 28rpx;
				font-weight: 500;
				border-radius: 8rpx;
				margin: 0 auto;
				text-align: center;
				line-height: 72rpx;
				margin-bottom: 20rpx;

				&.act {
					background-color: #FCC92A;
					color: #402110;
					border-color: #FCC92A;
				}
			}

			.jmbtns {
				display: flex;
				border-top: 1rpx solid #BDBDBD;
				height: 81rpx;

				.btn {
					font-size: 32rpx;
					text-align: center;
					line-height: 81rpx;
					height: 100%;
					color: #7F7F7F;
					width: 275rpx;
					box-sizing: border-box;

					&.right {
						color: #1A1A1A;
						border-left: 1rpx solid #BDBDBD;
					}
				}
			}
		}
	}

	.button {
		transform: translateY(1140rpx);
		margin: 0 auto;
		width: 360rpx;
		height: 140rpx;
		background: linear-gradient(90deg, #fdc928, #fd9b28);
		border-radius: 20rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #4d2b12;
		line-height: 140rpx;
		text-align: center;
	}

	.mask {
		position: fixed;
		background-color: rgba(0, 0, 0, 0.6);
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 99;

		.mask-main {
			width: 750rpx;

			background: #ffffff;
			position: absolute;
			bottom: 0;
			border-radius: 24rpx 24rpx 0 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.main-title {
				width: 750rpx;
				height: 108rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				&>image {
					width: 23rpx;
					height: 23rpx;
					margin-left: 30rpx;
				}

				&>text {
					display: inline-block;
					width: 690rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1a1a1a;
					line-height: 45rpx;
				}
			}

			.main-item {
				width: 630rpx;
				height: 72rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&>view:nth-child(1) {
					text-align-last: justify;
					width: 130rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #1A1A1A;
					line-height: 72rpx;
				}

				&>view:nth-child(2) {
					display: flex;
					width: 484rpx;
					height: 72rpx;
					background: #ffffff;
					border: 1rpx solid #bdbdbd;
					border-radius: 8rpx;

					&.money-box {
						border: none;
						justify-content: space-between;

						.pic-money {
							height: 72rpx;
							background: #F2F2F2;
							border-radius: 8rpx;
							width: 152rpx;
							text-align: center;
							line-height: 72rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #515151;

							&.act {
								background-color: #FCC92A;
								color: #402110;
							}
						}
					}

					&>input {
						margin: 20rpx;
						width: 444rpx;
						height: 32rpx;
					}
				}
			}

			.main-button {
				width: 630rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #fdc928, #fd9b28);
				border-radius: 20rpx;
				margin: 28rpx 0 160rpx 0;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #402110;
				line-height: 88rpx;
				text-align: center;
			}
		}
	}

	.yzm {
		width: 144rpx;
		height: 50rpx;
		background: #fdc928;
		border-radius: 8rpx;
		margin: 11rpx 10rpx 11rpx 24rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #402110;
		text-align: center;
		line-height: 50rpx;
	}

	.xzcs {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #dbdbdb;
		line-height: 72rpx;
	}

	.cs-view {
		width: 440rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 20rpx;

		&>input {
			width: 400rpx;
		}
	}

	.button-no {
		transform: translateY(1140rpx);
		margin: 0 auto;
		width: 360rpx;
		height: 140rpx;
		background: #fdc928;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&>text:nth-child(1) {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #4d2b12;
			line-height: 60rpx;
		}

		&>text:nth-child(2) {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #4d2b12;
			line-height: 40rpx;
		}
	}
</style>
